<template>
    <div class="app-container">
        <!-- 顶部信息区 -->
        <div class="header-section">
            <!-- 使用 :src 动态绑定 logo 路径 -->
            <img class="logo" src="" alt="Charity" />
            <div class="text-info">
                <div class="app-name">Charity</div>
                <div class="email">{{ email }}</div>
            </div>
        </div>

        <!-- 下方列表区 -->
        <div class="list-section">
            <ul class="menu-list">
                <li v-for="(item, index) in menuItems" :key="index" style="display:flex;align-items:center">
                    <span class="icon"></span>
                    {{ item }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 请替换为实际 logo 路径
            email: "samwheeler@example.com",
            menuItems: ["Dashboard", "Dashboard", "Dashboard", "Dashboard"],
        };
    },
};
</script>

<style scoped lang="scss">
// 定义一些变量，方便后续使用和修改
$primary-color: #3498db;
$secondary-color: #95a5a6;
$background-color: #f4f4f4;
$header-background-color: #e8e8e8;
$text-color: #666;

.app-container {

    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 1.6319rem;
    margin-left: 13px;
    margin-top: 22px;

    .header-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 8px;
        background-color: $header-background-color;
        margin-bottom: 10px;

        .logo {
            width: 121px;
            height: 109px;
            background-size: cover;
            // border: 3px solid $primary-color;
            border-radius: 24px;
            background: #fff;
            margin-top: 22px;
            margin-bottom: 16px;
        }

        .text-info {
            text-align: center;
        }

        .app-name {
            font-size: 14px;
            font-weight: 600;
        }

        .email {
            color: $text-color;
            font-size: 12px;
            margin-bottom: 33px;
        }
    }

    .list-section {
        flex: 1;
        height: 100%;
        background: #FFF;
        padding: 10px;
        border-radius: 8px;

        .menu-list {
            list-style-type: none;
            padding: 0;

            li {
                display: flex;
                align-items: center;
                padding: 10px;

                .icon {
                    width: 20px;
                    height: 20px;
                    background-color: $secondary-color;
                    border-radius: 50%;
                    margin-right: 10px;
                }
            }
        }
    }
}
</style>
